<!--
 * relative     : \src\components\baseLayout.vue
 * Author       : 郭鹏超
 * Date         : 2024-09-06 09:33
 * LastEditors  : 郭鹏超
 * LastEditTime : 2025-03-10 10:29
 * Description  : 基础布局组件
  参数className说明：
  className： base-layout-y:纵向布局   base-layout-x :横向布局
  header：header样式class名称 默认查看headerDefaulClass计算属性
  content：内容样式class名称 默认查看headerDefaulClass计算属性
  footer：底部样式class名称 默认查看headerDefaulClass计算属性
  4）可进行组件无线嵌套
 * CodeIterationRecord: 
 -->

<template>
  <div :class="[userLayoutClass, defaultLayoutClass]">
    <div :class="[userHeaderClass, defaultHeaderClass, isDrawerCollapsed ? 'w-0! mr-0!' : '']">
      <slot name="header"></slot>
      <drawer-switch v-if="showDrawerSwitch && layoutType == 'row'" v-model="isDrawerCollapsed"></drawer-switch>
    </div>
    <div :class="[userContentClass, defaultContentClass]">
      <slot name="default"></slot>
    </div>
    <div :class="[userFooterClass, defaultFooterClass]">
      <slot name="footer"></slot>
    </div>
    <slot name="fixed"></slot>
  </div>
</template>

<script setup lang="ts">
type LayoutType = "col" | "row";
const {
  layoutType,
  layout: userLayoutClass,
  header: userHeaderClass,
  content: userContentClass,
  footer: userFooterClass,
  showDrawerSwitch: showDrawerSwitch
} = withDefaults(
  defineProps<{
    //抽屉类型 col：纵向布局  row:横向布局
    layoutType: "col" | "row";
    //layout unocss 样式
    layout: string | string[];
    //header unocss 样式
    header: string | string[];
    //content unocss 样式
    content: string | string[];
    //footer unocss 样式
    footer: string | string[];
    //是否添加横向布局的header抽屉功能
    showDrawerSwitch?: boolean;
  }>(),
  {
    // 设置默认值
    layoutType: "col",
    layout: "",
    header: "",
    content: "",
    footer: "",
    showDrawerSwitch: false
  }
);

// 控制抽屉是否收起的状态
const isDrawerCollapsed = ref(false);
/**
 * @description: classView
 */
interface LayoutClassView {
  defaultLayoutClass: string;
  defaultHeaderClass: string;
  defaultContentClass: string;
  defaultFooterClass: string;
}

/**
 * @description:默认样式配置  纵向布局：col和横向布局row 默认样式，添加uno-layer-components:标识样式权重最小
 */
const layoutDefaultClassSettingType = ref<Record<LayoutType, LayoutClassView>>({
  // 纵向布局
  col: {
    defaultLayoutClass: "uno-layer-components:base-layout-y",
    defaultHeaderClass: "uno-layer-components:(mb-5 h-35 aline-left px-5)",
    defaultContentClass: "uno-layer-components:(flex-1 w-100% h-100% overflow-auto)",
    defaultFooterClass: "uno-layer-components:(aline-right px-5)"
  },
  // 横向布局
  row: {
    defaultLayoutClass: "uno-layer-components:base-layout-x",
    defaultHeaderClass: "uno-layer-components:(mr-3 w-300 animation-row)",
    defaultContentClass: "uno-layer-components:(flex-1 w-100% h-100% overflow-auto)",
    defaultFooterClass: ""
  }
});

/**
 * @description: 默认布局类型样式计算
 * @return
 */
const { defaultLayoutClass, defaultHeaderClass, defaultContentClass, defaultFooterClass } = computed(() => {
  return layoutDefaultClassSettingType.value[layoutType];
}).value;
</script>
